<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="context-path" th:content="@{/}"/>
    <title>管理控制台 | Wetech Admin</title>
    <!-- favicon icon -->
    <link rel="icon" type="image/png" th:href="@{/static/img/favicon.ico}">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/static/css/ionicons.min.css}">
    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/static/css/select2.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/static/css/AdminLTE.min.css}">
    <!-- Pace style -->
    <link rel="stylesheet" th:href="@{/static/css/pace.min.css}">
    <!-- zTree style -->
    <link rel="stylesheet" th:href="@{/static/css/ztree/metroStyle/metroStyle.css}">
    <!-- Bootstrap-table -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-table.min.css}">
    <!-- Animate -->
    <link rel="stylesheet" th:href="@{/static/css/animate.min.css}">
    <!-- daterange picker -->
    <link rel="stylesheet" th:href="@{/static/css/daterangepicker.css}">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-datepicker.min.css}">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-colorpicker.min.css}">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-timepicker.min.css}">
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/static/css/iCheck/square/blue.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/static/css/skins/_all-skins.min.css}">

    <!-- 自定义样式 -->
    <link rel="stylesheet" th:href="@{/static/css/admin.css}">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js}"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js}"></script>
    <![endif]-->
    <script th:inline="javascript">
        var CONTEXT_PATH = [[${#request.getContextPath()}]];
    </script>
    <!-- Google Font -->
    <!--<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<!-- Site wrapper -->
<div class="wrapper">
    <!--头部导航-->
    <!--<div th:replace="~{base/header :: header}"> </div>-->
   <!--左边导航-->
    <!--<div th:replace="~{base/main-sidebar :: main-sidebar}"> </div>-->
    <!-- Content Wrapper. Contains page content -->
    <!--<div class="content-wrapper" id="content-wrapper">
        <div th:replace="~{base/content-wrapper :: content-wrapper}"> </div>
    </div>-->
    <div class="content-wrapper" id="content-wrapper">
    <section class="content-header" th:fragment="content-wrapper">
        <h1>
            空页面
            <small>一切都从这里开始</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
            <li><a href="#">示例</a></li>
            <li class="active">空页面</li>
        </ol>
    </section>
    <section class="content-body">
        <!--th:object 传递的到视图层的model，向controller的form参数-->
        <form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post">

            <fieldset>
                <!--#{}Message 表达式-->
                <legend th:text="#{seedstarter.data}">Seed Starter Data</legend>
                  <!--所有的表单中的错误-->
                <ul th:if="${#fields.hasErrors('*')}" class="errorlist">
                    <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
                </ul>


                <div>
                    <label for="datePlanted">
                        <span th:text="#{seedstarter.datePlanted}">Date planted</span>
                        (<span th:text="#{date.format}">YYYY/MM/DD</span>)
                    </label>
                    <!--选择变量表达式-->
                    <input id="datePlanted" type="text" th:field="*{datePlanted}" th:errorclass="fieldError" />
                </div>
                <div>
                    <!--实用程序方法来处理可能重复的id属性-->
                    <label th:for="${#ids.next('covered')}" th:text="#{seedstarter.covered}">Covered</label>
                    <input type="checkbox" th:field="*{covered}" />
                </div>
                <div>
                    <label for="type" th:text="#{seedstarter.type}">Type</label>
                    <!--*选择表达式name属性-->
                    <select id="type" th:field="*{type}">
                        <option th:each="type : ${allTypes}" th:value="${type}" th:text="#{${'seedstarter.type.' + type}}">Wireframe</option>
                    </select>
                </div>
                <div>
                    <label th:text="#{seedstarter.features}">Features</label>
                    <ul>
                        <li th:each="feat : ${allFeatures}">
                            <!--features是对象obj的一个属性-->
                            <input type="checkbox" th:field="*{features}" th:value="${feat}" />
                            <label th:for="${#ids.prev('features')}" th:text="#{${'seedstarter.feature.' + feat}}">Electric Heating</label>
                        </li>
                        <!--all:删除包含标签和所有的孩子,可加条件选择性删除-->
                        <li th:remove="all">
                            <input id="removed1" type="checkbox" /> <label for="removed1">Turf</label>
                        </li>
                    </ul>
                </div>

                <div>
                    <label th:text="#{seedstarter.rows}">Rows</label>
                    <table>
                        <thead>
                        <!--表头-->
                        <tr>
                            <!--行号-->
                            <th th:text="#{seedstarter.rows.head.rownum}">Row</th>
                            <!--种类-->
                            <th th:text="#{seedstarter.rows.head.variety}">Variety</th>
                            <!--输入-->
                            <th th:text="#{seedstarter.rows.head.seedsPerCell}">Seeds per cell</th>
                            <!--操作，这个提交是如何进行的，异步刷新？-->
                            <th>
                                <button type="submit" name="addRow" th:text="#{seedstarter.row.add}">Add row</button>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--rows也是一个种植者对象的属性：list-->
                        <tr th:each="row,rowStat : *{rows}">
                            <td th:text="${rowStat.count}">1</td>
                            <td>
                                <!--row对象有一个int和对象variety，__${...}__是一种预处理表达式，必须这样才能取row[0]-->
                                <select th:field="*{rows[__${rowStat.index}__].variety}">
                                    <option th:each="var : ${allVarieties}" th:value="${var.id}" th:text="${var.name}">Thymus Thymi</option>
                                </select>
                            </td>
                            <td>
                                <!--根据什么来封装对象？-->
                                <input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" th:errorclass="fieldError" />
                            </td>
                            <td>
                                <button type="submit" name="removeRow" th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="submit">
                    <button type="submit" name="save" th:text="#{seedstarter.create}">Add Seed Starter</button>
                </div>

            </fieldset>

        </form>
    </section>
    </div>
    <!-- /.content-wrapper -->
  <!--尾部导航-->
    <!--<div th:replace="~{base/footer :: main-footer}"> </div>-->

    <!--<div th:replace="~{base/control-sidebar :: control-sidebar}"> </div>-->

    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- jQuery 3 -->
<script th:src="@{/static/js/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/static/js/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/static/js/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/static/js/adminlte.min.js}"></script>
<!-- Select2 -->
<script th:src="@{/static/js/select2.full.min.js}"></script>
<!-- InputMask -->
<script th:src="@{/static/js/jquery.inputmask.js}"></script>
<script th:src="@{/static/js/jquery.inputmask.date.extensions.js}"></script>
<script th:src="@{/static/js/jquery.inputmask.extensions.js}"></script>
<!-- date-range-picker -->
<script th:src="@{/static/js/moment.min.js}"></script>
<script th:src="@{/static/js/daterangepicker.js}"></script>
<!-- bootstrap datepicker -->
<script th:src="@{/static/js/bootstrap-datepicker.min.js}"></script>
<!-- bootstrap color picker -->
<script th:src="@{/static/js/bootstrap-colorpicker.min.js}"></script>
<!-- bootstrap time picker -->
<script th:src="@{/static/js/bootstrap-timepicker.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/static/js/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/static/js/fastclick.js}"></script>
<!-- PACE -->
<script th:src="@{/static/js/pace.min.js}"></script>
<!-- zTree script -->
<script th:src="@{/static/js/jquery.ztree.all.min.js}"></script>
<!-- Bootstrap-table -->
<script th:src="@{/static/js/bootstrap-table.min.js}"></script>
<script th:src="@{/static/js/bootstrap-table-zh-CN.min.js}"></script>
<!-- Bootstrap-notify-3.1.3 -->
<script th:src="@{/static/js/bootstrap-notify.min.js}"></script>
<!-- Bootstrap-validator-0.11.9 -->
<script th:src="@{/static/js/validator.min.js}"></script>
<!-- iCheck -->
<script th:src="@{/static/js/icheck.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/static/js/demo.js}"></script>

<script th:inline="javascript" th:src="@{/static/js/admin.js}"></script>
<script th:src="@{/static/js/common/utils.js}"></script>
</body>
</html>